<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>v-bind</title>
    <script src="js/vuejs-2.5.16.js"></script>

    <style>
        .red{
            background: red;
        }

    </style>
</head>
<body>

<div id="app">

    <!--  没用使用vue 添加背景色样式  直接在元素添加class 属性值-->
    <div  class="red">v-bind t1111est</div>
    <br>
    <!--使用vue绑定 添加背景色样式   v-bind:class 来完成属性值-->
    <div  v-bind:class="mycolor">v-bind test</div>

</div>

<script>
    new Vue({
        el: "#app",
        data: {
            mycolor:'red'  //  数据模型 决定标签页面显示的数据
        }
    })
</script>

</body>
</html>